<template>
  <view class="shopPage">
    <view class="topBox con">
      <view class="navbarBox">
        <u-input placeholder="搜索内容" prefix-icon="search" prefix-icon-style="color:#8dd9d4;font-size:24px"> </u-input>
        <image @click="goPage('/pages/message/message')" src="../../static/home/msg.png" class="icon" mode="aspectFill" />
      </view>
      <view class="priceBox">
        <view class="priceBoxTitle"> 今日好价 <view class="line"></view> </view>
        <view class="priceBoxGoods">
          <view class="box" v-for="(item, index) in jrhjList" :key="index" @click="goPage(`/pages/shop/goodsDetails/goodsDetails?goodId=${item.goodId}`)">
            <image class="imgBox" :src="item.picurl" mode="aspectFill" />
            <view class="priceText"
              >￥{{ item.price }} <text class="deleteLine">￥{{ item.oldPrice }}</text></view
            >
          </view>
        </view>
      </view>
      <up-tabs
        :list="tabList"
        @click="tabacClick"
        lineColor="#81D8D0"
        :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      ></up-tabs>
    </view>
    <view class="listBox">
      <template v-if="goodsList.length > 0">
        <view style="width: 49%" v-for="(item, index) in goodsList" :key="index">
          <GoodsItem :info="item" />
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
import GoodsItem from "./components/GoodsItem.vue";
import { onMounted, reactive, ref } from "vue";
import { selectCateLst, selectGoodsLst, selectGoodsLstByType } from "@/api/order";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
const tabList = ref<{ value: string; name: string }[]>([]);
const goodsList = ref([]);
const goodsStatus = ref("loadmore");
const goodsPage = ref(1);
const tabActive = ref("");
const jrhjList = ref<any[]>([]);
onMounted(async () => {
  const res = await selectCateLst();
  tabList.value = res.cateList.map((i: any) => ({
    value: i.cateNo,
    name: i.name,
  }));
  tabList.value.unshift({
    name: "全部",
    value: "",
  });
  goodsRest();
  const res2 = await selectGoodsLstByType({ type: 1 });
  console.log(res2);
  jrhjList.value = res2.goodList;
});
const tabacClick = (item: any) => {
  tabActive.value = item.value;
  goodsRest();
};
const getList = async () => {
  if (goodsStatus.value == "nomore") {
    return;
  }
  goodsStatus.value = "loadmore";
  const res = await selectGoodsLst({ pageNo: goodsPage.value, cateId: tabActive.value || null });
  goodsList.value = goodsList.value.concat(res.goodList);
  if (!res.next) {
    goodsStatus.value = "nomore";
  } else {
    goodsStatus.value = "loadmore";
  }
};
const goodsRest = () => {
  goodsPage.value = 1;
  goodsStatus.value = "loadmore";
  goodsList.value = [];
  getList();
};
onReachBottom(() => {
  goodsPage.value++;
  getList();
});
</script>
<style lang="less" scoped>
.shopPage {
  width: 100%;
  .topBox {
    padding-left: 32rpx;
    padding-right: 32rpx;
    background: linear-gradient(180deg, rgba(92, 203, 193, 0.24) 0%, rgba(92, 203, 193, 0.04) 66%, rgba(92, 203, 193, 0) 100%);
    margin-bottom: 20rpx;
    .priceBox {
      height: 300rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 16rpx;
      .priceBoxTitle {
        height: 44rpx;
        font-family: DingTalk JinBuTi, DingTalk JinBuTi;
        font-weight: 400;
        font-size: 36rpx;
        color: #333333;
        line-height: 44rpx;
        margin-bottom: 22rpx;
        position: relative;
        .line {
          position: absolute;
          bottom: 1rpx;
          width: 135rpx;
          height: 14rpx;
          background: #81d8d0;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          opacity: 0.3;
        }
      }
      .priceBoxGoods {
        display: flex;
        flex-wrap: nowrap;
        gap: 4rpx;
        justify-content: space-between;
        flex: 1;
        .box {
          width: 24%;
          .imgBox {
            width: 100%;
            height: 152rpx;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            border: 2rpx solid #f3f4f6;
          }
          .priceText {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            color: #ea3b3b;
            margin-top: 10rpx;
            .deleteLine {
              font-size: 24rpx;
              color: #8a8a8d;
              line-height: 34rpx;
              text-decoration-line: line-through;
              text-transform: none;
            }
          }
        }
      }
    }
  }
}
.listBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f3f4f6;
}
</style>
